$(document).ready(function () {
   
    list();

});


function list() {
    $.ajax({
        type: "GET",
        url: SERVER_PATH + "/data/list",
        xhrFields: {withCredentials: true},
        success: function (result) {
            if (result.status) {
                alertBox(result.data.message);
                return false;
            }
            init(result.data);
        }
    });
}

function init(dataLists) {
    //实例化echarts
    // 1 创建一个实例
    var echart = echarts.init(document.querySelector(".data-container"));
    //进水量
    let data1 = dataLists.inWaterList;
    //出水量
    let data2 = dataLists.outWaterList;
    //标注
    let data3 = []
    //横轴时间
    let data4 = dataLists.dateList;
    data1.forEach((item1, index) => {
        if (item1 > data2[index]) {
            data3.push(
                {
                    yAxis: item1,  //标注的Y轴位置
                    xAxis: data4[index], //标注的X轴位置
                    value: item1  //标注的value值
                }
            )
        } else {
            data3.push(
                {
                    yAxis: data2[index],  //标注的Y轴位置
                    xAxis: data4[index], //标注的X轴位置
                    value: data2[index]  //标注的value值
                }
            )
        }
    })

    // 2 定义配置项
    var option = {
        backgroundColor: 'white',
        grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '8%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            borderWidth: 1,
            axisPointer: {
                type: 'shadow'
            },
            extraCssText: 'z-index:2'

        },
        legend: [{
            top: 'top',
            left: 'center',
            orient: 'horizontal',
            data: ['进水量', '出水量'],
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 15,
            borderRadius: 4,
            textStyle: {
                color: '#000',
                fontFamily: 'Alibaba PuHuiTi',
                fontSize: 14,
                fontWeight: 400
            }
        }],
        xAxis: {
            type: 'category',
            data: data4,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#393939' //X轴文字颜色
                }
            }
        },
        yAxis: [

            {
                type: 'value',
                name: '',
                nameTextStyle: {
                    color: '#000',
                    fontFamily: 'Alibaba PuHuiTi',
                    fontSize: 14,
                    fontWeight: 600
                    // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
                },
                nameGap: 30,  // 表现为上下位置
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eeeeee'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#393939',
                    fontSize: 14
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eeeeee'
                    }
                }

            }

        ],
        series: [
            {
                name: '进水量',
                type: 'line',
                showAllSymbol: true, //显示所有图形。
                //标记的图形为实心圆
                symbolSize: 8, //标记的大小
                itemStyle: {
                    //折线拐点标志的样式
                    color: 'white',
                    borderWidth: '2',
                    borderColor: '#5470c6',
                    normal: {
                        color: '#5470c6'//拐点颜色
                    }
                },
                lineStyle: {
                    color: '#5470c6'
                },
                markPoint: {
                    data: data3
                },
                data: data1
            },
            {
                name: '出水量',
                type: 'line',
                showAllSymbol: true, //显示所有图形。
                symbolSize: 8, //标记的大小
                itemStyle: {
                    //折线拐点标志的样式
                    color: 'white',
                    borderWidth: '2',
                    borderColor: '#91cc75',
                    normal: {
                        color: '#91cc75'//拐点颜色
                    }
                },
                lineStyle: {
                    color: '#91cc75'
                },
                data: data2
            }
        ]
    }
    // 3 更新配置
    echart.setOption(option);

}